iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
0
自我挑戰組

網頁排版個人學習筆記系列 第 27

RWD| 常見響應式選單-1

  • 分享至 

  • xImage
  •  

文章前提

多欄式多列式設計細節、漢堡選單設計


多欄多列式設計細節

Mobile

  • 最小值建議設320 / 目前手機最小螢幕約320px

  • 以選單字元抓16pt,約20個字(16x20=320px),但選單周圍都還會需要有留白處,所以須和客戶做溝通看怎麼呈現好的視覺。

  • 選單內文字建議四個字。5~6就會有點太多惹!

  • 選單通常不會是奇數,三個還可以排成一列,但超過三個以上的奇數就會不太好看
    https://ithelp.ithome.com.tw/upload/images/20190926/20119743jIJU2l8VXO.png
    註: 此示意圖原出處為六角學院

  • 設計網站的時間

    • pc web layout 1~2天
    • RWD web layout 3~7天
  • 如果專案時辰上有壓力,先客製化較熱門的斷點,有時間再做其他斷點優化

RWD漢堡選單 範例

RWD漢堡選單示意圖1
|步驟分解| 從桌機版開始寫到手機板

桌機
https://ithelp.ithome.com.tw/upload/images/20190926/20119743bHSm0l6ZhH.png

  • header架構起來(包含裡面的 logo 與 menu選單)
    • .showmenu 需寫在.menu內才可同行。如果在.menu外會變區塊元素變上而下排列
    • 先把.showmenu做隱藏,等平板手機模式再顯示
  • 桌機: content內文架起

平板+手機
https://ithelp.ithome.com.tw/upload/images/20190926/20119743TlfVODTJem.png

  • 讓.menu-list對齊header
    • .menu-list以.header為父元素 所以設定position: absolute; 讓選單.menu-list保持在最上面用z-index(數值高越上面)
  • 加動畫後,.menu-list從.header下方滑出
    • 往下移一個header高度,另外.header如果有寫border-bottom,也須加上border-bottom的數值喔!!
    • 沒有設header寬度可使用開發者工具查看
  • 選單內文從橫變直式排列
.menu-list li{
    float: none; 
}
  • 選單由左往右延伸讓寬度變100%
.menu-list{ 
    left:0; 
    right:0;
}
  • 選單隱藏
.menu-list{ 
    max-height: 0%; 
    overflow:hidden; 
}
  • 手機選單按鈕顯示
  • 使用 動態(jQuery)載入css style設定
/*jQ點擊後動態在 body 加上 class */
    .menu-show .menu-list{
        max-height: 336px;
    }
$(document).ready(function() {
   $('.showmenu').on('click',  function(e) {
      e.preventDefault();
      $('body').toggleClass('menu-show');
  });
});

漢堡選單-自我練習 範例

使用不同動態(jq-使用active)

/*jQ點擊後動態在 body 加上 class*/
.menu-list.active{
        max-height: 336px;
    }
$(document).ready(function() {
    $('.showmenu').on('click',  function(e) {
        e.preventDefault();
        $('.menu-list').toggleClass('active');
    });
});

註: 因為mobile-menu桌機隱藏,手機才顯示,所以和menu無衝突,可不用包在同一div中,減少div使用

<div class="header clearfix">
            <h1 class="logo">
                <a href="#">公司logo</a>
            </h1>
            <a class="mobile-menu" href="#">MENU</a>
            <ul class="menu clearfix">
                <li><a href="#">menu1</a></li>
                <li><a href="#">menu2</a></li>
                <li><a href="#">menu3</a></li>
                <li><a href="#">menu4</a></li>
            </ul>
<!--因為mobile-menu桌機隱藏,手機才顯示,所以和menu無衝突,可不用包在同一div中-->
</div>

六角學院線上課程問與答區 原出處

|問題|
我在這裡使用 display:noneposition:absolute的方法製作漢堡選單,
不知道與老師你所用的max-height:0比較起來哪個會比較常見或者display:none有甚麼缺點以至於不使用它??

|回覆|
這邊針對你的問題回答
display: none;max-height: 0; 都是常見隱藏元素的手法,沒有一定要使用哪一個,要是當下情況來選擇
display: none; 有一個不一樣的地方是它在 transition 下是沒有過場效果的,
如果要用的 display: none; 還需要有動畫效果就可能需要以 Js 來寫,或是以 CSS3 的 animation 語法來製作。


上一篇
RWD| 響應式圖片設計
下一篇
RWD| 常見響應式選單-2
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言